<template>
   <div>
        <el-card class="card-box first-card">
               <img :src="status=='0'?unreadyImg:status=='1'?readyImg:clearReady" alt="" class="readyLog">
                <el-steps :active="state" align-left style="width: 80%;">
                    <el-step title="下单时间" :description="this.data.creatTime | formatDate"></el-step>
                    <el-step v-if="status==2" title="已取消付款" :description="this.data.payTime?this.data.payTime :'已取消'"></el-step>
                    <el-step v-else title="付款时间" :description="this.data.payTime?this.data.payTime:'待付款' "></el-step>
                </el-steps>
                <div class="tips" v-if="status=='0'">
                    <div class="tips-title">请在<span class="clear-time">{{ timeOut | getDuration }}</span>之前支付订单，否则系统将自动关闭订单,如果商品被恶意拍下，您可以后台取消订单。</div>
                    <el-button type="success"  plain @click="clearOrder">取消订单</el-button>
                </div>
        </el-card>
        <el-card class="card-box second-card">
              <div class="left">
                <mytitle :showLine="true" class="titles">签署人信息</mytitle>
                <div class="member">
                        <span class="member-title">签署人</span>
                        <span class="member-name">{{showMsg.fosterName}}</span>
                </div>
                <div class="member">
                        <span class="member-title">联系方式</span>
                        <span class="member-name">{{showMsg.fosterPhone}}</span>
                </div>
                <div class="member">
                       <span class="member-title">身份证号</span>
                       <span class="member-name">{{showMsg.idCard}}</span>
                </div>
              </div>
              <div class="right">
                <mytitle :showLine="false">地块信息</mytitle>
                <el-table ref="singleTable" show-summary :header-cell-style="{color: '#292B2B', background: '#EAF9F4'}" :data="tableData"  border
                    style="width: 100%">
                    <el-table-column property="plantId" label="果树编号"  align="center">
                    </el-table-column>
                    <el-table-column property="variety" label="品种名称"  align="center">
                    </el-table-column>
                    <el-table-column property="plantRent" label="租赁金额(元)"  align="center">
                    </el-table-column>
                    <el-table-column property="tenancyDuration" label="租赁时间"  align="center">
                    </el-table-column>
                </el-table>
              </div>
        </el-card>
   </div>
</template>
<script>
 import {findTenancyDetailByTenancyId,cancelPayment} from '../util/api.js'
 import {formatDate} from '../util/timeOut.js'
 export default{
    data(){
        return{
             readyImg:require('../assets/ready.png'),
             unreadyImg:require('../assets/unready.png'),
             clearReady:require('../assets/clearReady.png'),
             status:'',
             data:{
                creatTime:null,
                payTime:null,
                orderCancelTime:null
             },
             tenancyId:"",
             tableData:[],
             state:3,
             showMsg:{},
             timeOut:0,
             orderNo:"",
        }
    },
    mounted(){
       let res  = JSON.parse(decodeURIComponent(this.$route.query.data))
    //    console.log(res)
       this.tenancyId = res.tenancyId
       this.orderNo = res.orderNo
       this.status = this.$route.query.state
       this.getDetail()
    },
    methods:{
        async getDetail(){
            let res = await findTenancyDetailByTenancyId({tenancyId:this.tenancyId})
            // console.log(res)
            if(res.code!=200)return
            this.data = {
                creatTime:res.data.placeAnOrderTime,
                payTime:res.data.payTime,
                orderCancelTime:res.data.orderCancelTime
            }
            
            for(let item in this.data){
                if(this.data[item]==null)this.state--
            }
            this.tableData = res.data.fruitTreeS
            this.showMsg = res.data
            this.timeOut =  (res.data.orderExpireTime)*60*1000;
            this.myTimeout()
        },
        myTimeout(){
           let tiems =  setInterval(()=>{
                this.timeOut =  this.timeOut - 1000
                if(this.timeOut<=0){
                    clearInterval(tiems)
                    this.timeOut=0
                }
            },1000)
        },
        clearOrder(){
            this.$confirm('是否取消订单?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        }).then(async() => {
                        let res= await cancelPayment({orderNo:this.orderNo})
                        // console.log(res)
                        if(res.code!=200)return
                        this.$router.go(-1)
                        this.$message({
                            type: 'success',
                            message: '已取消!'
                        });
            }) 
        }
    }
 }
</script>
<style lang="less" scoped>
.card-box{
    width: 100%;
    position: relative;
    
}
.clear-time{
    color: #29C840;
    font-size: 13px;
    font-weight: 550;
}
.first-card{
    padding: 20px;
    padding-left: 80px;
    margin-bottom: 20px;
    .readyLog{
        width:100px;
        height:100px;
        position: absolute;
        left: -5px;
        top: -5px;
    }
    .tips{
        margin-top: 20px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
/deep/.el-card__body, .el-main{
    padding: 0;
}
/deep/.second-card .el-card__body{
    width: 100%;
    display: flex;
    .left{
        width: 400px;
        padding-top: 20px;
        border-right: 1px solid rgba(0,0,0,0.15);
        .titles{
            padding: 0 20px;
            padding-bottom: 20px;
            
        }
        .member{
            margin:20px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(0,0,0,0.15);
            display: flex;
            flex-direction: column;
            .member-title{
                font-size: 16px;
                font-weight: 550;
                color: #3B3B3B;
                line-height: 16px;
            }
            .member-name{
                font-size: 16px;
                color: rgba(0,0,0,0.65);
                line-height: 40px;
            }
        }
    }
    .right{
        flex:1;
        padding-top: 20px;
        padding: 20px;
    }
}



/deep/.el-step__head.is-finish{
    color: #2AC841!important;
    border-color: #2AC841!important;
}
/deep/.el-step__title.is-finish{
    color: #2AC841!important;
}
/deep/.el-step__description.is-finish{
    color: black!important;
}
/deep/.el-step__icon{
    width: 10px!important;
    height: 10px!important;
    overflow: hidden!important;
    background-color: #2AC841!important;
}
/deep/.is-process .el-step__icon{
    width: 10px!important;
    height: 10px!important;
    overflow: hidden!important;
    background-color: #FEBC2D!important;
    border:#FEBC2D!important;
    color:#FEBC2D!important;
}
/deep/.is-wait .el-step__icon{
    width: 10px!important;
    height: 10px!important;
    overflow: hidden!important;
    background-color: #C0C4CC!important;
    border:#C0C4CC!important;
    color:#C0C4CC!important;
}
/deep/.is-process{
    color:#FEBC2D!important;
}
</style>